<template>
  <div class="claimInsurance">
    <!-- 查询 -->
    <el-form style="margin: 15px" size="mini" :inline="true" :model="selectData">
      <el-form-item label="手机号：">
        <el-input size="mini" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="11" v-model="selectData.phone">
        </el-input>
      </el-form-item>
      <el-form-item label="会员卡号：">
        <el-input size="mini" v-model="selectData.customerCard"></el-input>
      </el-form-item>
      <el-form-item label="保单号：">
        <el-input size="mini" v-model="selectData.policyNum"></el-input>
      </el-form-item>
      <el-form-item label="已理赔(审核)日期：">
        <el-date-picker style="width: 130px" size="mini" v-model="selectData.claimDateForward" type="date"
          placeholder="选择日期">
        </el-date-picker>--
        <el-date-picker style="width: 130px" size="mini" v-model="selectData.claimDateForwardBack" type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="理赔状态：">
        <el-select clearable v-model="selectData.start" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker style="width: 130px" size="mini" v-model="selectData.flightDateForward" type="date"
          placeholder="选择日期">
        </el-date-picker>
        <!-- <el-date-picker
          style="width: 130px"
          size="mini"
          v-model="selectData.flightDateBack"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker> -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <el-table size="mini" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" :data="insuranceList" border style="width: 100%">
      <el-table-column prop="workOrder" label="工单信息">
        <template slot-scope="scope">
          <div>
            <div>
              <span>延误工单：</span>
              <!-- <span>{{ scope.row.workOrder.delay ? scope.row.workOrder.delay : '' }}</span> -->
              <span>{{ scope.row.workOrderdelay }}</span>
            </div>
            <div>
              <span>工单标题：</span>
              <!-- <span>{{ scope.row.workOrder.title?scope.row.workOrder.title:'' }}</span> -->
              <span>{{ scope.row.workOrdertitle}}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="member" label="会员信息">
        <template slot-scope="scope">
          <div>
            <div>
              <span>卡号：</span>
              <span>{{ scope.row.membercardNum }}</span>
            </div>
            <div>
              <span>姓名：</span>
              <span>{{ scope.row.membername }}</span>
            </div>
            <div>
              <span>手机号：</span>
              <span>{{ scope.row.memberphone }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="insurance" label="保险信息" v-if="this.insuranceList.insurance != null">
        <template slot-scope="scope">
          <div>
            <div>
              <span>电子保单号：</span>
              <span>{{ scope.row.insuranceelectronicNum }}</span>
            </div>
            <div>
              <span>保单号：</span>
              <span>{{ scope.row.insurancepolicyNum }}</span>
            </div>
            <div>
              <span>保单类型：</span>
              <span>{{ scope.row.insurancepolicyType }}</span>
            </div>
            <div>
              <span>延误次数：</span>
              <span>{{ scope.row.insurancedelayCount }}</span>
            </div>
            <div>
              <span>取消次数：</span>
              <span>{{ scope.row.insurancecancelCount }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="flight" label="航班信息">
        <template slot-scope="scope">
          <div>
            <div>
              <span>航班号：</span>
              <span>{{ scope.row.flightflightNum }}</span>
            </div>
            <div>
              <span>航程：</span>
              <span>{{ scope.row.flightvoyage }}</span>
            </div>
            <div>
              <span>航班日期：</span>
              <span>{{ scope.row.flightflightDate }}</span>
            </div>
            <div>
              <span>航班状态：</span>
              <span>{{ scope.row.flightflightStart? "未起飞" : '已飞'  }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间"> </el-table-column>
      <el-table-column prop="start" label="赔偿状态"> </el-table-column>
      <el-table-column prop="orderNum" label="机票订单号"> </el-table-column>
      <el-table-column width="220px" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editclaimInsurancemethod(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="delDialogVisible" :close-on-click-modal="false" width="60%" center>
      <el-form style="margin: 15px" size="mini" :inline="true" :model="editData" ref="editData">
        <h4>工单信息：</h4>

        <el-form-item label="工单号">
          <el-input size="mini" v-model="editData.id"></el-input>
        </el-form-item>
        <!-- <el-form-item label="延误工单">
          <el-input
            size="mini"
            v-model="workOrder.delay"
          ></el-input> </el-form-item
        ><el-form-item label="工单标题">
          <el-input size="mini" v-model="workOrder.id"></el-input>
        </el-form-item> -->

        <h4>会员信息：</h4>
        <el-form-item label="卡号类型：">

          <el-select :disabled="true" v-model="editData.cardType" placeholder="请选择">
            <el-option v-for="item in custmortype" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卡号：">
          <el-input size="mini" :disabled="true" v-model="editData.cardNum"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input size="mini" :disabled="true" v-model="editData.customerName"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input size="mini" :disabled="true" v-model="editData.phone"></el-input>
        </el-form-item>

        <h4>航班信息：</h4>

        <el-form-item label="航班号：">
          <el-input size="mini" v-model="editData.flightNum"></el-input>
        </el-form-item>
        <el-form-item label="航程：">
          <el-input size="mini" v-model="editData.voyage"></el-input>
        </el-form-item>
        <el-form-item label="航班日期：">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="editData.flightTime" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="航班状态：">
          <el-select clearable v-model="editData.flightStart" placeholder="请选择">
            <el-option v-for="item in flightstatusList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="延误时长：">
          <!-- <el-input size="mini" v-model="editData.delayTime"></el-input> -->
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="editData.delayTime" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="原定起飞时间：">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="editData.originalSetOffTime" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="原定到达时间：">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="editData.originalFinishTime" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际起飞时间：">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="editData.actualSetOffTime" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际到达时间：">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="editData.actualFinishTime" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <h4>理赔信息：</h4>

        <el-form-item label="理赔保单号：">
          <el-input size="mini" :disabled="true" v-model="editData.claimPolicyNum"></el-input>
        </el-form-item>
        <el-form-item label="机票订单号：">
          <el-input size="mini" :disabled="true" v-model="editData.flightOrderNum"></el-input>
        </el-form-item>

        <el-form-item label="理赔状态：">

          <el-select :disabled="true" clearable v-model="editData.claimStart" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div></div>
        <el-form-item label="备注：">
          <el-input type="textarea" :autosize="{ minRows: 2 }" style="width: 400px" v-model="editData.remark">
          </el-input>
        </el-form-item>

        <div></div>
        <el-form-item label="身份证正面图片：">
          <el-upload action="/file/fileMapping/uploadClaim" list-type="picture" :on-success="successuploadidz"
            :on-preview="handlePictureCardPreviewidz" :on-remove="handleRemoveidz">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证反面图片：">
          <el-upload :on-success="successuploadidf" list-type="picture" action="/file/fileMapping/uploadClaim"
            :on-preview="handlePictureCardPreviewidz" :on-remove="handleRemoveidz">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="登  机  牌 图片：">
          <el-upload action="/file/fileMapping/uploadClaim" list-type="picture" :on-success="successuploaddjp"
            :on-preview="handlePictureCardPreviewidz" :on-remove="handleRemoveidz">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="延误/取消证明图片：">
          <el-upload action="/file/fileMapping/uploadClaim" list-type="picture" :on-success="successuploadzm"
            :on-preview="handlePictureCardPreviewidz" :on-remove="handleRemoveidz">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="geteditdelayinsurance()">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "claimInsurance",
    data() {
      return {
        //分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        // 查询数据
        selectData: {
          phone: "", //手机号
          customerCard: "", //会员卡号
          policyNum: "", //保单号
          claimDateForward: new Date(new Date() - 24 * 60 * 60 * 1000 * 7)
            .toLocaleDateString()
            .replace(/\//g, "-"), //理赔前
          claimDateForwardBack: new Date(new Date())
            .toLocaleDateString()
            .replace(/\//g, "-"), //理赔后
          start: "", //状态
          flightDateForward: "", //起飞前
          flightDateBack: "", //起飞后
        },

        // 表单验证
        rules: {
          name: [{
            required: true,
            message: "请输入活动名称",
            trigger: "blur"
          }],
        },
        // 赔偿状态
        options: [{
            value: "",
            label: "全部",
          },
          {
            value: "0",
            label: "初始",
          },
          {
            value: "1",
            label: "理赔成功",
          },
          {
            value: "2",
            label: "理赔失败",
          },
          {
            value: "3",
            label: "安心打款失败",
          },
          {
            value: "4",
            label: "安心打款成功",
          },
        ],

        // 航班状态
        flightstatusList: [{
            value: "0",
            label: " 航班延误",
          },
          {
            value: "1",
            label: "航班取消",
          },
        ],
        custmortype: [{
            value: "体验会员",
            label: "体验会员",
          },
          {
            value: "白银会员",
            label: "白银会员",
          },
          {
            value: "黄金会员",
            label: "黄金会员",
          },
          {
            value: "黑金会员·健康卡",
            label: "黑金会员·健康卡",
          },
          {
            value: "黑金会员·出行卡",
            label: "黑金会员·出行卡",
          },


        ],
        // 保单类型
        insurancepolicyList: [],
        // 查询回来的数据
        insuranceList: [],

        //修改弹窗
        delDialogVisible: false,
        // 修改数据
        editData: {
          id: null, //工单号
          cardType: "", //卡号类型
          cardNum: "", //会员卡号
          customerName: "", //会员姓名
          phone: "", //会员手机
          flightNum: "", //航班号
          voyage: "", //航程
          flightTime: "", //航班时间
          delayTime: "", //延误时长
          originalSetOffTime: "", //原定起飞时间
          originalFinishTime: "", //原定到达时间
          actualSetOffTime: "", //实际起飞时间
          actualFinishTime: "", //实际到达时间
          flightStart: "", //航班状态
          claimPolicyNum: "", //理赔保单号
          flightOrderNum: "", //机票订单号
          claimStart: "", //理赔状态
          remark: "", //备注

        },
        pictureURLVoList: [{
            id: "",
            url: "",
            pictureType: "IDCardJust",
          },
          {
            id: "",
            url: "",
            pictureType: "IDCardOpposite",
          },
          {
            id: "",
            url: "",
            pictureType: "BoardingPass",
          },
          {
            id: "",
            url: "",
            pictureType: "Prove",
          },
        ], //id
      };

    },
    methods: {

      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getclaimDelayinsuranceList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getclaimDelayinsuranceList();
        // orders = res.data;
      },

      search() {
        localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getclaimDelayinsuranceList();
      },

      // 保险类型接口
      getinsuranceTypeList() {
        this.$axios.getinsuranceTypeList({}).then((res) => {
          console.log(res);
          this.insurancepolicyList = res.data;
        });
      },
      // 修改点击事件
      editclaimInsurancemethod(row) {
        console.log(row);
        this.delDialogVisible = true;
        // this.editdata.id = row.delayinsuranceId
        this.getselClaimDelayinsurance(row.delayinsuranceId);
      },

      // 查询接口
      getclaimDelayinsuranceList() {
        this.$axios
          .getclaimDelayinsuranceList({
            phone: this.selectData.phone,
            customerCard: this.selectData.customerCard,
            policyNum: this.selectData.policyNum,
            claimDateForward: this.selectData.claimDateForward,
            claimDateForwardBack: this.selectData.claimDateForwardBack,
            start: this.selectData.start,
            flightDateForward: this.selectData.flightDateForward,
            flightDateBack: this.selectData.flightDateBack,
          })
          .then((res) => {
            console.log(res);
            this.insuranceList = res.data;

            this.pageTotal = res.total
            for (let i = 0; i < this.insuranceList.length; i++) {
              this.insuranceList[i].workOrderdelay = this.insuranceList[i].workOrder.delay
              this.insuranceList[i].workOrdertitle = this.insuranceList[i].workOrder.title
              this.insuranceList[i].membercardNum = this.insuranceList[i].member.cardNum
              this.insuranceList[i].membername = this.insuranceList[i].member.name
              this.insuranceList[i].memberphone = this.insuranceList[i].member.phone
              this.insuranceList[i].insurancecancelCount = this.insuranceList[i].insurance.cancelCount
              this.insuranceList[i].insurancedelayCount = this.insuranceList[i].insurance.delayCount
              this.insuranceList[i].insuranceelectronicNum = this.insuranceList[i].insurance.electronicNum
              this.insuranceList[i].insuranceoperateSerialNumber = this.insuranceList[i].insurance.operateSerialNumber
              this.insuranceList[i].insurancepolicyNum = this.insuranceList[i].insurance.policyNum
              this.insuranceList[i].insurancepolicyType = this.insuranceList[i].insurance.policyType
              this.insuranceList[i].insuranceproduct = this.insuranceList[i].insurance.product
              this.insuranceList[i].insuranceserialNumber = this.insuranceList[i].insurance.serialNumber
              this.insuranceList[i].flightflightDate = this.insuranceList[i].flight.flightDate
              this.insuranceList[i].flightflightNum = this.insuranceList[i].flight.flightNum
              this.insuranceList[i].flightflightStart = this.insuranceList[i].flight.flightStart
              this.insuranceList[i].flightvoyage = this.insuranceList[i].flight.voyage
            }
            console.log(this.insuranceList)

            //     if(!this.pageTotal){
            //    this.$message({
            //   message: '当前日期暂无信息',
            // });}
          });
      },
      // 修改接口
      geteditdelayinsurance() {
        if (
          this.editData.delayTime != ""
        ) {
          this.$axios
            .geteditdelayinsurance({
              id: this.editData.id, //工单号
              cardType: this.editData.cardType, //卡号类型
              cardNum: this.editData.cardNum, //会员卡号
              customerName: this.editData.customerName, //会员姓名
              phone: this.editData.phone, //会员手机
              flightNum: this.editData.flightNum, //航班号
              voyage: this.editData.voyage, //航程
              flightTime: this.editData.flightTime, //航班时间
              delayTime: this.editData.delayTime, //延误时长
              originalSetOffTime: this.editData.originalSetOffTime, //原定起飞时间
              originalFinishTime: this.editData.originalFinishTime, //原定到达时间
              actualSetOffTime: this.editData.actualSetOffTime, //实际起飞时间
              actualFinishTime: this.editData.actualFinishTime, //实际到达时间
              flightStart: this.editData.flightStart, //航班状态
              claimPolicyNum: this.editData.claimPolicyNum, //理赔保单号
              flightOrderNum: this.editData.flightOrderNum, //机票订单号
              claimStart: this.editData.claimStart, //理赔状态
              remark: this.editData.remark, //备注
              pictureURLVoList: this.pictureURLVoList, //图片路径集合

            })
            .then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.getclaimDelayinsuranceList()
                this.delDialogVisible = false;
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
            });
        } else {
          this.$message({
            message: "请输入延误时间",
            type: "warning",
          });
        }
      },

      // 查询待修改
      getselClaimDelayinsurance(id) {

        this.$axios
          .getselClaimDelayinsurance({
            id: id,
          })
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.editData = res.data;
              this.pictureURLVoList = res.data.pictureURLVoList
              console.log(this.editData);
            }
          });
      },

      // 身份证正面
      handleRemoveidz(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreviewidz(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 上传成功正面
      successuploadidz(response) {
        console.log(response[0]);
        this.pictureURLVoList[0].url = response[0]
        console.log(this.pictureURLVoList)
      },
      // 上传成功反面
      successuploadidf(response) {
        console.log(response[0]);
        this.pictureURLVoList[1].url = response[0]
      },
      // 上传成功登机牌
      successuploaddjp(response) {
        console.log(response[0]);
        this.pictureURLVoList[2].url = response[0]
      },
      // 上传成功证明
      successuploadzm(response) {
        console.log(response[0]);
        this.pictureURLVoList[3].url = response[0]
      },
    },
    mounted() {
      this.getinsuranceTypeList();
      // 列表接口
      this.getclaimDelayinsuranceList()

    },
  };
</script>

<style lang="less" scoped>
</style>